<template>
    <el-dialog center title="年费计算" :visible.sync="visible" width="600px" @close="close">
        <div class="info">
            <div class="label">专利号</div>
            <div>{{ detailInfo.applicationNumber }}</div>
            <div class="label">名称</div>
            <div>{{ detailInfo.patentName }}</div>
            <div class="label">申请日期</div>
            <div>{{ detailInfo.applicationTime }}</div>
        </div>
        <el-table :data="detailInfo.calculateList" borderstyle="width: 100%">
            <el-table-column prop="feeType" min-width="150px" label="费用种类" />
            <el-table-column prop="shouldPaymentAmount" label="应缴金额" />
            <el-table-column prop="serviceCharge" label="服务费" />
            <el-table-column prop="lumpSum" label="总金额" />
            <el-table-column prop="payCloseTime" label="缴费截止日" />
        </el-table>
        <div style="margin-top: 20px" class="flex flex-end">
            <el-button class="btn-plain" @click="close">关闭</el-button>
            <el-button type="primary" @click="toPayment">缴费</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getCompanyPatentPayment } from '../../../api/api.js'
export default {
    data() {
        return {
            visible: false,
            detailInfo: {}
        }
    },
    methods: {
        open(id) {
            this.visible = true
            this.getDetail(id)
        },
        getDetail(id) {
            getCompanyPatentPayment({applicationNumber: id}).then(res=>{
                this.detailInfo = res
            })
        },
        close() {
            this.visible = false
        },
        toPayment() {
            this.visible = false
            // let routeData = this.$router.resolve({
            // 　　path: "/patentPayment",
            // 　　query:{num: this.detailInfo.applicationNumber}
            // });
            // window.open(routeData.href, "_blank")
            this.$emit('payment',this.detailInfo.announcementNumber)
        },
    }
}
</script>
<style lang="less" scoped>
.info{
    width: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px 15px;
    .label{
        margin: 10px 0;
        font-size: 15px;
        font-weight: bold;
        color: #000;
    }
}
</style>
